<template>
  <div id="app">
    <sprite :image-src="player.imageSrc"
            :size="player.size"
            :position="player.position"
    >
    </sprite>
  </div>
</template>

<script lang="ts">
import Sprite from "../components/sprite/Sprite.vue";
import logo from '../assets/logo.png';
import { ESKeyCode, ESKeyEvent } from "@extscreen/es3-core";

export default {
  components: { Sprite },
  data() {
    return {
      logo,
      TAG: 'home',
      player: {
        position: { x: 10, y: 450 }, // 初始位置在地面上
        size: { width: 400, height: 400 },
        imageSrc: logo
      },
      velocity: { x: 0, y: 0 },
      gravity: 9.8,
      groundLevel: 450, // 地面高度
      isJumping: false,
      jumpForce: -400,
      updateInterval: null
    };
  },
  methods: {
    onKeyDown(keyEvent: ESKeyEvent) {
      if (keyEvent.keyCode === ESKeyCode.ES_KEYCODE_DPAD_UP && !this.isJumping) {
        this.velocity.y = this.jumpForce;
        this.isJumping = true;
        console.log('Jump initiated');
        this.updateInterval = setInterval(this.update, 16); // 16ms 约等于 60fps
      }
    },
    update() {
      if (this.isJumping) {
        // 应用重力
        this.velocity.y += this.gravity * 0.016; // 16ms 约等于 60fps
        // 更新位置
        this.player.position.y += this.velocity.y * 0.016;

        // 检查是否触地
        if (this.velocity.y > 0 && this.player.position.y >= this.groundLevel) {
          this.player.position.y = this.groundLevel;
          this.velocity.y = 0;
          this.isJumping = false;
          console.log('Player landed');
          clearInterval(this.updateInterval);
        }
      }
    }
  }
};
</script>

<style>
#app {
  background-color: white;
  width: 1920px;
  height: 1080px;
}
</style>
